<template>
  <div>
    <div id="search-options">
        <el-form size="small" :inline="true">
          <el-form-item label="一级字典：">
              <el-select v-model="searchForm.pid" clearable>
                  <el-option v-for="(obj,index) in firstLevelDict" :key="index" :label="obj.name" :value="obj.id"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="英文名称：">
            <el-input v-model="searchForm.code" clearable></el-input>
          </el-form-item>
          <el-form-item label="中文名称：">
            <el-input  v-model="searchForm.name" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" id="query-btn" plain icon="el-icon-search" type="primary" @click="searchData">查询</el-button>
            <el-button size="small" id="add-btn" plain icon="el-icon-plus" type="primary" @click="openSaveDialog('add')">添加</el-button>
          </el-form-item>
        </el-form>
    </div>
    <div style="margin-left:20px;margin-right:20px;">
        <el-table id="data-table" :data="dictList" style="width: 100%;" border :highlight-current-row="true" stripe>
            <el-table-column prop="id" label="id" align="center"></el-table-column>
            <el-table-column prop="pid" label="父字典id" align="center"></el-table-column>
            <el-table-column prop="code" label="字典名称英文" align="center"></el-table-column>
            <el-table-column prop="name" label="字典名称中文" align="center">
                <template slot-scope="scope">
                    <span style="cursor: pointer;" :id="'span' + scope.row.id" @click="toggleEditTable(scope.row.id)">{{ scope.row.name }}</span>
                    <div :id="'div' + scope.row.id" style="display:none;">
                        <el-input  v-model="scope.row.name" style="margin-bottom:3px;"></el-input>
                        <el-button size="small" plain type="primary" style="float:left;" @click="saveName(scope.row)">保存</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="160" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.updateTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                 <template slot-scope="scope">
                    <el-tooltip  effect="dark" content="编辑" placement="bottom-end">
                     <el-button size="small" plain type="primary" icon="el-icon-edit" @click="openSaveDialog('edit',scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination">
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="searchForm.page.pageNum" :page-sizes="[10]" :page-size="10" :total="common.page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    </div>

    <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogFormVisible" :center="true" v-el-drag-dialog @dragDialog="handleDrag">
        <el-form :model="saveDictForm">
          <el-form-item v-if="saveDictForm.id" label="id：" label-width="100px">
            <span style="width:10%;">&nbsp;</span>
            <span>{{saveDictForm.id}}</span>
          </el-form-item>
          <el-form-item label="父字典：" label-width="100px">
              <span style="width:10%;">&nbsp;</span>
              <el-select style="width:90%;" v-model="saveDictForm.pid" clearable placeholder="父字典">
                  <el-option v-for="(obj,index) in firstLevelDict" :key="index" :label="obj.name" :value="obj.id"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="英文名称：" label-width="100px" required>
            <span style="width:10%;">&nbsp;</span>
            <span v-if="saveDictForm.id" style="width:90%;">{{saveDictForm.code}}</span>
            <el-input v-else style="width:90%;" v-model="saveDictForm.code" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="中文名称：" label-width="100px">
            <span style="width:10%;">&nbsp;</span>
            <el-input style="width:90%;" v-model="saveDictForm.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" plain icon="el-icon-close" type="info" @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="small" plain icon="el-icon-check" type="primary" @click="saveDict">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui

export default {
  name: 'elDragDialog',
  directives: { elDragDialog },
  data () {
    return {
        dictList: [{
            id: null,
            pid: null,
            code: '',
            name: '',
            createTime: '',
            updateTime: ''
        }],
        firstLevelDict: [{
            id: null,
            name: ''
        }],
        searchForm: {
            code: '',
            pid: null,
            name: '',
            page: {
                pageNum: 1,
                pageSize: 10
            }
        },
        dialogTitle: '',
        dialogFormVisible: false,
        saveDictForm: {
            id: null,
            pid: null,
            code: '',
            name: ''
        },
        pageIds: [], // 用于表格行内编辑
    }
  },
  methods: {
       // v-el-drag-dialog onDrag callback function
      handleDrag() {
        //   console.log('123')
      },
      handleSizeChange (pageSize) {
        this.searchForm.page.pageSize = pageSize
        this.loadData()
      },
      handleCurrentChange (pageNum) {
        this.searchForm.page.pageNum = pageNum
        this.loadData()
      },
      loadData () {
          let vm = this
        //   vm.searchForm.page = vm.common.pageQuery
        //   vm.$http.post('api/dict/find',vm.searchForm).then(res => {
        //     // console.log(res)
        //     if (res.data.code === 0){
        //       //console.log(res.data.data)
        //       vm.dictList = res.data.data.records
        //       vm.common.page.total = res.data.data.total
        //     }
        //     else {
        //       vm.$message.error(res.data.msg)
        //     }
        //   })
          vm.$store.dispatch('dict/dictFind', vm.searchForm).then((res) => {
            //   console.log(res)
             vm.dictList = res.data.records
             let index
             vm.pageIds = []
             for (index in vm.dictList) {
                 vm.pageIds.push(vm.dictList[index].id)
             }
             vm.common.page.total = res.data.total
          }).catch(errMsg => {
              vm.$message.error(errMsg)
          }),
          vm.$store.dispatch('dict/findAllFirstLevelDict').then(res => {
            //   console.log(res)
            vm.firstLevelDict = res.data
          }).catch(errMsg => {
              vm.$message.error(errMsg)
          })
      },
      searchData () {
          let vm = this
          vm.searchForm.page.pageNum = 1
          vm.loadData()
      },
      resetForm () {
        this.saveDictForm = {
            id: null,
            pid: null,
            code: '',
            name: ''
        }
      },
      findDetail (id) {
          let vm = this
          vm.$http.get('api/dict/findDetail?dictId=' + id).then(res => {
            if (res.data.code === 0){
                vm.saveDictForm = res.data.data
            }
            else {
              vm.$message.error(res.data.msg)
            }
          })
      },
      openSaveDialog (opt,row) {
        let vm = this
        vm.resetForm()
        if('edit' === opt) {
           vm.dialogTitle = '修改'
           vm.findDetail(row.id)
           vm.dialogFormVisible = true
        }
        else if ('add' === opt) {
            vm.dialogTitle = '添加'
            vm.dialogFormVisible = true
        }
      },
      saveDict () {
          let vm = this
          vm.$store.dispatch('dict/dictSave', vm.saveDictForm).then((res) => {
            if(res.code === 0){
                vm.$message({
                    message: '保存字典成功',
                    type: 'success'
                })
                vm.dialogFormVisible = false
                vm.loadData()
            }
          }).catch(errMsg => {
              vm.$message.error(errMsg)
          })
      },
      toggleEditTable (id) {
          document.getElementById('span' + id).style.display = 'none'
          document.getElementById('div' + id).style.display = ''
          // 列表页其他的行状态相反
          let vm = this
          let arr = []
          let index
          for (index in vm.pageIds){
              if (vm.pageIds[index] !== id) {
                document.getElementById('span' + vm.pageIds[index]).style.display = ''
                document.getElementById('div' + vm.pageIds[index]).style.display = 'none'
              }
          }
      },
      saveName (row) {
        let vm = this
        vm.$http.post('api/dict/save',row).then(res => {
          if (res.data.code === 0){
            vm.$message.success('保存名称成功')
            // 必须要3行 只vm.loadData()没有重新渲染页面 为啥
            document.getElementById('span' + row.id).style.display = ''
            document.getElementById('div' + row.id).style.display = 'none'
            vm.loadData()
          }
          else {
            vm.$message.error(res.data.msg)
          }
        })
      }
  },
  mounted() {
    let vm = this
    vm.loadData()
  }
}
</script>
